tags: Vue.js ItIron2020

前言

我們在昨天的文章中簡單介紹了vue.js以及如何利用線上編輯器打造你最初的vue.js專案，其中我們知道你可以利用Vue實體(instance)中的data屬性直接去影響最後渲染出來的畫面，今天我們將進一步地介紹vue實體中的兩大屬性data & methods!

先等等，你一直在講實體實體，到底什麼是vue實體?

其實不用想的太複雜，我們在js中一直有接觸到實體(instance)的概念，簡單說就是某個父親的孩子，聽不懂對吧? 看一下簡單的例子吧!

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  greet() {
    console.log(`Hello, My name is ${this.name}`)
  }
}

const danny = new Person('Danny', 29)
console.log(danny.age) // 29
danny.greet() // Hello, My name is Danny

在上方的例子中，我們就會說danny是一個Person的實體，就像親子關係一樣，孩子會有父母一些特點，換成程式語言來說就是會有一些既有的屬性或方法可以使用，如果你覺得class這樣的東西你有些難以理解，其實很多時候我們都在不自覺的使用這樣物件導向的概念

const arr = new Array()

這樣其實我們也創建了一個Array的實體囉~!
了解實體的基本概念後，要理解vue實體相信就難不倒你了，我們每次建立一個vue檔案，其實就是創建一個vue實體，原本的程式碼寫法會類似下方這樣

new Vue({
  el: '#app',
  data: {
   greeting: 'Hello World!',
   user: 'Hassan Djirdeh',
   city: 'Toronto',
  },
});

這樣就可以清楚的看出其實與我們一開始講的例子沒有太大的差別，就是建立一個實體，從中我們傳入了一些屬性這樣~! 而在vue實體中我們有著眾多的屬性讓我們使用(data、methods、computed等)，今天我們則會介紹最常用到的兩個data & method!

認識data屬性

當一個vue實體被建立時，它會將在data物件中的所有屬性加入vue的響應系統中(eactivity system)，當data物件中的任何屬性被改變值，我們的畫面(view)會即時重新渲染，讓畫面的內容符合新變動的值，在vue的template中我們可以利用mustache syntax(也就是兩個大括號)使用data物件中的屬性，我們用昨天的範例做說明吧!

<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  }
};
</script>

在這個例子中我們可以看到，data物件中的message值取代了原先在template中的{{message}}，我們若修改message的值，你會發現view也同時重新渲染，讓你在畫面上看奧你修改後的數值!

在vue實體中的data屬性有兩種寫法，你可以像上方的範例這樣(這種寫法記得要寫return，讓它呼叫data時可以得到一個物件)

data() {
    return {
      message: 'Welcome to Vue!'
    };
  }

或者你喜歡old school一點的寫法也沒關係~They both work~!

data: {
    message: 'Welcome to Vue!'
}

如果你是採用線上編輯器打造的練習專案，現在一般較為常見的會是第一種寫法!

認識methods屬性

在vue實體中的methods屬性讓我們能定義一些可以綁在該實體上的函數，這些函數可以替我們做到我們想做的事情，就像一般的js函數一樣! 像是我們希望點擊按鈕後跳出訊息、使用者輸入密碼時給予提示都可以透過methods達成，我們今天只會接觸到methods最最最基礎的應用，在之後的文章我們會進一步探討在vue中的事件監聽以及methods vs computed這樣的老問題!

我們接續昨天的範例，首先我們先定義一個簡單的函數，這個函數會跳出alert向使用者打招呼。 請你將script的內容修改為以下

<script>
export default {
  data: {
    message: 'Welcome to Vue!'
  },
  methods: {
    greet() {
      alert('Hello I am Danny')
    }
  }
};
</script>

現在我們有函數了，那要如何觸發這個函數呢?
一點也不困難，我們只要新增一個按鈕，並利用這個按鈕監聽點擊事件，最終觸發這個函數即可， 請你修改template部分的程式碼，我們等一下再解釋發生了什麼事情!

<template>
  <div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="greet">Click Me</button>
  </div>
</template>

畫面上應該會出現一個按鈕，點擊之後你會發現函數真的成功觸發了!

在上方的範例中，我們利用v-on這樣的指令綁訂了一個click事件，並告訴它click之後要觸發methods中的哪個函數，你可以想成它其實是這樣的東西，我相信會更加好懂

btn.addEventListener('click', greet)

而v-on可以縮寫為@，所以原本的範例可以再精簡為

 <button @click="greet">Click Me</button>

看到這邊我想你也猜到了，能綁定的事件絕對不只點擊(click)，再加上vue提供了許多的修飾符讓我們能做更精確的事件監聽，這些我們會留在之後的文章做說明，別急別急!

結語

今天我們認識了data & methods屬性，並且理解到如何在vue中監聽最常見的點擊事件，明天我們將介紹vue中幾個重要的指令(vue directives)，藉由那些強大的指令可以讓我們輕鬆達到許多們想要的效果，先據透一下，我們今天接觸的v-on其實就是其中一個指令:D
如何，是不是很好很強大讓你很期待吧? 希望如此，我們明天見?